<template>
  <f7-page>
    <f7-navbar :title="$t('menu.createDevice')" :back-link="$t('common.back')"></f7-navbar>
    <f7-block-title>{{$t("common.information")}}</f7-block-title>
    <f7-list form>
      <f7-list-item>
        <f7-label>{{$t("common.imei")}}</f7-label>
        <f7-input type="text" :placeholder="$t('menu.addDevice.deviceIMEI')" :value="device.imei" @input="device.imei = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>{{$t("common.name")}}</f7-label>
        <f7-input type="text" :placeholder="$t('menu.addDevice.deviceName')" :value="device.name" @input="device.name = $event.target.value"></f7-input>
      </f7-list-item>

      <f7-list-item>
        <f7-label>{{$t("common.sim")}}</f7-label>
        <f7-input type="tel" :placeholder="$t('menu.addDevice.simNumber')"  :value="device.sim" @input="device.sim = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>{{$t("common.type")}}</f7-label>
        <f7-input type="select"  @input="device.typeId = $event.target.value">
          <option :selected="type.id ==1" :value="type.id" v-for="(type,index) in $store.state.dict.deviceTypes">{{type.name}}</option>

        </f7-input>
      </f7-list-item>

      <!-- <f7-list-item>
        <f7-label>备注</f7-label>
        <f7-input type="textarea" placeholder="备注设备的其他信息"></f7-input>
      </f7-list-item> -->

    </f7-list>

    <f7-block>
      <f7-row tag="p">
        <f7-button class="col"  fill raised color="blue" @click="addDevice">{{$t("common.save")}}</f7-button>

      </f7-row>
    </f7-block>
  </f7-page>
</template>

<script>
import { addDevice } from '@/api/api';
export default {
  data() {
			return {
				device:{
          name:'',
          imei:'',
          sim:'',
          typeId:1,
          groupId:0
        }
			}
		},
  methods:{
    addDevice(){
       console.log(this.device);
        addDevice(this.device).then(data => {
          this.$store.dispatch('initDevices'); //初始化设备
          this.$f7.views.main.router.back();
        });


    },
  },
  mounted() {

		}
}
</script>
